<template>
	<view>
		<nav-bar ref="navBar" type="transparent" backState="2000" :scrollTop="scrollTop" :titleCenter="false" bgColor="#f312a6" fontColor="#FFF" :shadow="false"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
            <!-- <view class="label_box">
                <text v-for="(item,index) of recommendLabelList" :key="item.objId" @click="onPageJump('/pages/home/recommendGoodsList?objId='+item.objId+'&name='+item.title)">{{item.title}}</text>
            </view> -->
            <!-- banner -->
            <view class="index_banner_box">
                <swiper class="banner_swiper" :autoplay="true" :interval="3000" circular :duration="1000" @change="onSwiperChange">
                    <swiper-item v-for="(item, index) of bannerList" :key="index">
                        <view class="banner_img" :class="{ active: swiperIndex == index }">
                            <image :src="item.imgUrl" mode="aspectFill" @click="onBanner(item)"></image>
                        </view>
                    </swiper-item>
                </swiper>
                <view class="banner_pages">{{swiperIndex + 1}}<text>/</text>{{bannerList.length}}</view>
            </view>
            <!-- 搜索框 -->
            <view class="search_box" @click="onPageJump('/pages/home/search')"><view class="search_item">搜索</view></view>
            <view class="menu_nav_box">
                <!-- 导航栏 -->
                <view class="menu_swiper_nav">
                    <view class="swiper_nav_box">
                        <view class="navs_item" v-for="(item, index) of menuList" :key="index" @click="onPageJump('/pages/home/shop/goodsList?typeId=' + item.objId + '&title=' + item.name)">
                            <image :src="item.iconUrl" mode="aspectFill"></image>
                            <text>{{ item.name }}</text>
                        </view>
                    </view>
                </view>
                <!-- 资讯 -->
                <view class="news_ww_box">
                    <image @click="onPageJump('/pages/news/newsList')" src="../../static/icon/theme/ic_information_title.png" mode="aspectFit"></image>
                    <view class="line"></view>
                    <swiper class="news_ww_swiper" vertical circular :autoplay="true" :interval="3000" :duration="1000">
                        <swiper-item v-for="(item, index) of newsList" :key="item.objId" @click="onNews(item)">
                            <view class="news_ww_title">{{ item.title }}</view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>

            <!-- 活动导航 -->
            <view class="activity_ww_box">
                <view :class="{ active: activityType == 1000 }" @click="activityType = 1000">
                    <view>超值秒杀</view>
                    <text>全场3~8折</text>
                </view>
                <text class="line">|</text>
                <view :class="{ active: activityType == 2000 }" @click="activityType = 2000">
                    <view>精品拼团</view>
                    <text>一起购更划算</text>
                </view>
                <text class="line">|</text>
                <view :class="{ active: activityType == 3000 }" @click="activityType = 3000">
                    <view>积分兑换</view>
                    <text>免费换福利了</text>
                </view>
            </view>
            <!-- 秒杀 -->
            <view class="goods_box" v-if="activityType == 1000">
                <spike-goods-item v-for="(item, index) of spikeList" :key="item.objId" :item="item" :index="index"></spike-goods-item>
                <view class=""></view>
                <view class="more_goods"><button @click="onPageJump('/pages/home/spikeList')">查看更多 ></button></view>
            </view>
            <!-- 拼团 -->
            <view class="goods_box" v-if="activityType == 2000">
                <fight-goods-item v-for="(item, index) of fightList" :key="item.objId" :item="item" :index="index"></fight-goods-item>
                <view class="more_goods"><button @click="onPageJump('/pages/home/fightList')">查看更多 ></button></view>
            </view>

            <!-- 积分-->
            <view class="goods_box" v-if="activityType == 3000">
                <home-integral-goods-item v-for="(item, index) of integralList" :key="item.objId" :item="item" :index="index"></home-integral-goods-item>
                <view class="more_goods"><button @click="onPageJump('/pages/integral/integralMall')">查看更多 ></button></view>
            </view>

            <!-- 广告 -->
            <view class="advertisement_entrance" v-if="voucherList.length > 0">
                <image :src="voucherList[0].img" mode="aspectFill" @click="onCollarCoupon(voucherList[0])"></image>
            </view>
            <!-- 商品类型筛选 -->
            <view class="goods_type_filter"><goods-type-select @change="goodsTypeChange"></goods-type-select></view>
            <!-- 商品排序 -->
            <view class="goods_sort_box">
                <view :class="{ active: sortType == 3000 }" @click="onSortType(3000)">智能排序</view>
                <view :class="{ active: sortType == 3002 }" @click="onSortType(3002)">好评优先</view>
                <view :class="{ active: sortType == 3001 }" @click="onSortType(3001)">低价优先</view>
                <view :class="{ active: sortType == 3003 }" @click="onSortType(3003)">销量优先</view>
            </view>
            <waterfall-goods ref="waterfall" :list="goodsDataList"></waterfall-goods>
        </mescroll-body>
		<view class="video_box" v-if="videoShow" @click="onCloseVideo"><video :src="videoUrl" autoplay="true" controls></video></view>
		<!-- 优惠券弹框 -->
		<view class="bullet_mask" v-if="bulletShow" @click="bulletShow = false"><image :src="bulletInfo.img" @click.stop="onCollarCouponByPopup" mode="widthFix"></image></view>
		<attention-public v-model="showPopup" :showBtn="true"></attention-public>
	</view>
</template>

<script>
import navBar from '@/components/common/zhouWei-navBar/index.vue';
import spikeGoodsItem from '@/components/module/spike_goods_item';
import fightGoodsItem from '@/components/module/fight_goods_item';
import homeIntegralGoodsItem from '@/components/module/home_integral_goods_item';
import waterfallGoods from '@/components/module/waterfall_goods';
import goodsTypeSelect from '@/components/module/goods_type_select';
import attentionPublic from '@/components/module/attention_public';
import { mapState, mapMutations } from 'vuex';
import { onLogin } from '@/config/login';
import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
	components: {
		spikeGoodsItem,
		fightGoodsItem,
		homeIntegralGoodsItem,
		waterfallGoods,
		goodsTypeSelect,
		attentionPublic
	},
	data() {
		return {
			videoUrl: '',
			videoShow: false,
			swiperIndex: 0,
			bannerList: [],
			sortType: 3000,
			menuList: [],
			newsList: [],
			activityType: 1000,
			goodsDataList: [],
			spikeList: [],
			fightList: [],
			downOption: {
				auto: false //是否在初始化后,自动执行downCallback; 默认true
			},
            upOption: {
                auto: false,//是否在初始化后,自动执行downCallback; 默认true,
                toTop: {
                    src: ""
                }
            },
			// 推荐标签
			recommendLabelList: [],
			integralList: [],
			voucherList: [],
			bulletShow: false,
			bulletInfo: {},
			showPopup: false,
			scrollTop: 0
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	//第一次加载
	onLoad(e) {
		// #ifdef MP-WEIXIN
		onLogin("try",() => {
			this.getCoupon();
		});
		// #endif
		this.pageData();
		// #ifdef H5
		let recommendCode = uni.getStorageSync('recommendCode');
		if (recommendCode) {
			this.showPopup = true;
		}
		// #endif
	},
	//页面显示
	onShow() {
		if (this.userInfo.token) {
			this.getCoupon();
		}
	},
	//方法
	methods: {
		...mapMutations(['setWebViewUrl']),
		pageData() {
			// 轮播图接口
			this.$http
				.post('api/open/v1/lunbo', {
					locatType: 1101
				})
				.then(res => {
					this.bannerList = res;
				});
			this.$http
				.post('api/article/v1/list', {
					pageNo: 1,
					pageSize: 10,
					recommend: true
				})
				.then(res => {
					this.newsList = res.data;
				});
			// 秒杀
			this.$http
				.post('api/mall/goods/v1/spike_list', {
					pageNo: 1,
					pageSize: 2
				})
				.then(res => {
					this.spikeList = res.data;
				});
			// 拼团
			this.$http
				.post('api/mall/goods/v1/pt_list', {
					pageNo: 1,
					pageSize: 2
				})
				.then(res => {
					this.fightList = res.data;
				});
			// 积分
			this.$http
				.post('api/shop_integral/v1/list', {
					pageNo: 1,
					pageSize: 2
				})
				.then(res => {
					this.integralList = res.data;
				});
			// 菜单列表
			this.$http
				.get('api/mall/goods/v1/type', {
					type: 1401
				})
				.then(res => {
					if (res.length > 8) {
						this.menuList = res.splice(0, 8);
					} else {
						this.menuList = res;
					}
				});
			// 推荐标签
			this.$http.get('api/shopAd_category/v1/mall_list_data').then(res => {
				this.recommendLabelList = res;
			});
			// 优惠卷
			this.$http.get('api/open/v1/discount_voucher_list').then(res => {
				this.voucherList = res;
			});
		},
		//领取优惠券
		onCollarCoupon(item) {
			this.judgeLogin(() => {
				this.$http
					.get('api/open/v1/receive_discount_voucher', {
						objId: item.objId
					})
					.then(res => {
						uni.showToast({
							title: '领取成功,请到我的里面查看',
							icon: 'none'
						});
					});
			});
		},

		//获取优惠券弹窗信息
		getCoupon() {
			this.$http.get('api/open/v1/bullet_box').then(res => {
				if (res && res.voucherId) {
					this.bulletShow = true;
					this.bulletInfo = res;
				}
			});
		},

		//领取弹框优惠券
		onCollarCouponByPopup() {
			this.$http
				.get('api/open/v1/receive_discount_voucher', {
					objId: this.bulletInfo.voucherId
				})
				.then(res => {
					this.bulletShow = false;
					uni.showToast({
						title: '领取成功,请到我的里面查看',
						icon: 'none'
					});
				});
		},

		onPageJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		// 轮播图点击
		onBanner(item) {
			if (item.jumpType == 1501) {
				uni.navigateTo({
					url: '/pages/home/shop/shop?objId=' + item.jumpRecord.id
				});
			} else if (item.jumpType == 1502) {
				uni.navigateTo({
					url: '/pages/home/shop/goodsDetail?objId=' + item.jumpRecord.id
				});
			} else if (item.jumpType == 1601) {
				uni.navigateTo({
					url: '/pagesMy/my/about'
				});
			} else if (item.jumpType == 1201) {
				this.setWebViewUrl(item.jumpRecord.webViewUrl);
				uni.navigateTo({
					url: '/pages/home/webView'
				});
			} else if (item.jumpType == 1301) {
				this.videoUrl = item.jumpRecord.videoUrl;
				this.videoShow = true;
			} else if (item.jumpType == 1101) {
				uni.navigateTo({
					url: item.jumpRecord.webViewUrl
				});
			}
		},
		// 排序选择
		onSortType(val) {
			this.sortType = val;
			this.mescroll.triggerDownScroll();
		},
		// 分类点击
		goodsTypeChange(val) {
			this.typeId = val.objId;
			this.mescroll.triggerDownScroll();
		},
        /*下拉刷新的回调 */
        downCallback() {
        	//联网加载数据
        	this.loadData(1);
        },
        /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
        upCallback(page) {
        	//联网加载数据
        	this.loadData(page.num);
        },
        loadData(pageNo) {
            let httpData = {
                pageNo: pageNo,
                pageSize: 15,
                sortType: this.sortType
            };
            if(this.typeId){
            	httpData.typeId = this.typeId;
            }
            this.$http
            	.post('api/mall/goods/v1/list', httpData,{
            		load:false
            	}).then(res => {
            		uni.stopPullDownRefresh();
            		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
            		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
            		
            		if (pageNo == 1) {
            			this.goodsDataList = res.data;
            		} else {
            			this.goodsDataList = this.goodsDataList.concat(res.data);
            		}
            	}).catch(() => {
            		//联网失败, 结束加载
            		this.mescroll.endErr();
            	});
        },
		// 轮播图变化
		onSwiperChange(e) {
			this.swiperIndex = e.detail.current;
		},
		// 资讯选择
		onNews(item) {
			uni.navigateTo({
				url: '/pages/news/newsDetails?objId=' + item.objId
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';

.bullet_mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		width: 80%;
	}
}

.search_box {
	display: flex;
	align-items: center;
	padding: 0 30upx;
	position: relative;
	margin-top: -60rpx;
	z-index: 2;
	.search_item {
		display: flex;
		align-items: center;
		width: 690upx;
		height: 80upx;
		background-color: #ffffff;
		border-radius: 40upx;
		font-size: 28upx;
		color: #cccccc;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		&:before {
			content: '';
			@include bis('../../static/icon/ic_search.png');
			width: 30upx;
			height: 29upx;
			margin-right: 20upx;
			margin-left: 40upx;
		}
	}
}

.label_box {
	@include theme('gradient_bg');
	padding: 10upx 30upx 25upx 30upx;
	display: flex;
	flex-wrap: wrap;

	text {
		height: 48upx;
		margin: 4upx;
		font-size: 24upx;
		color: #ffffff;
		line-height: 48upx;
		padding: 0 16upx;
	}
}

.video_box {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;

	video {
		width: 100%;
	}
}

.index_banner_box {
	position: absolute;
	overflow: hidden;
	height: 408upx;
	position: relative;
	z-index: 2;
	.banner_swiper {
		height: 408upx;
		.banner_img {
			width: 100%;
			height: 408upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.banner_pages {
		position: absolute;
		bottom: 80upx;
		right: 60upx;
		height: 40upx;
		z-index: 3;
		background-color: rgba(0, 0, 0, 0.5);
		line-height: 40upx;
		border-radius: 20upx;
		color: #fff;
		font-size: 24upx;
		padding: 0 20upx;

		text {
			margin: 0 6upx;
		}
	}

	&:after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -20upx;
		width: 100%;
		height: 40upx;
		z-index: 2;
		@include bis('../../static/icon/theme/bg_home.png');
	}
}

.goods_type_filter {
	//margin-top: 20upx;
}
.menu_nav_box {
	margin: 30upx 30upx 0 30upx;
}
.menu_swiper_nav {
	padding: 10upx 10upx 20upx 10upx;
	background-color: #fff;

	.swiper_nav_box {
		display: flex;
		flex-wrap: wrap;

		.navs_item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20upx 0;

			image {
				width: 88upx;
				height: 88upx;
				border-radius: 50%;
			}

			text {
				font-size: 24upx;
				color: #3d3d3d;
				margin-top: 15upx;
				@include toe();
				width: 100%;
				text-align: center;
			}
		}
	}
}

.advertisement_entrance {
	padding: 0upx 0upx 0upx 0upx;
	background-color: #fff;

	image {
		width: 100%;
		height: 190upx;
	}
}

.activity_ww_box {
	padding: 40upx 0upx 30upx 0upx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.line {
		color: #ccc;
	}

	> view {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		view {
			font-size: 32upx;
			color: #333333;
		}

		text {
			font-size: 24upx;
			color: #999999;
			height: 42upx;
			border-radius: 4upx;
			line-height: 42upx;
			margin-top: 10upx;
			padding: 0 10upx;
		}

		&.active {
			view {
				color: $themeColor;
			}

			text {
				color: #ffffff;
				@include theme('gradient_bg');
			}
		}
	}
}

.goods_box {
	//padding-top: 20upx;

	.more_goods {
		padding: 10upx 30upx 40upx 30upx;
		display: flex;
		justify-content: center;

		button {
			background-color: transparent;
			height: 30upx;
			font-size: 28upx;
			color: #999999;
			line-height: 30upx;
			border-radius: 0;
			padding: 0 15upx;
		}
	}
}

.news_ww_box {
	background-color: #fff;
	padding: 30upx;
	display: flex;
	align-items: center;

	image {
		width: 132upx;
		height: 32upx;
		flex-shrink: 0;
	}

	.line {
		width: 2upx;
		height: 40upx;
		background-color: #e5e5e5;
		margin: 0 30upx;
	}

	.news_ww_swiper {
		height: 40upx;
		width: calc(100% - 194upx);

		.news_ww_title {
			font-size: 24upx;
			color: #333333;
			width: 100%;
			@include toe();
		}
	}
}

.goods_sort_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	width: 100%;
	font-size: 28upx;
	background-color: #fff;

	> view {
		padding: 30upx 0upx;
		white-space: nowrap;
		color: #333333;
		opacity: 0.5;
		position: relative;
		flex: 1;
		text-align: center;
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			width: 2upx;
			right: 0;
			height: 24upx;
			transform: translateY(-50%);
			background: #cccccc;
		}

		&:last-child::before {
			content: inherit;
			width: 0;
		}
	}

	.active {
		opacity: 1;
	}
}
</style>
